<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <!--:rules prop 如果不要校验那么这个属性可以不填-->
      <el-form
        label-width="160px"
        style="margin: 20px 50px 20px 0px;"
        size="mini"
      >
        <el-row>
          <!--券商代码-->
          <el-col :span="8">
            <el-form-item label="机构名称:">
              <el-input
                v-model="table.bean_table.oside_name"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!--机构类型-->
          <el-col :span="8">
            <el-form-item label="机构类型:">
              <el-select
                v-model="table.bean_table.oside_type"
                class="venus-input-middle"
                placeholder="--请选择--"
                filterable
                clearable
              >
                <el-option
                  v-for="(value,key,index) in dict.oside_type"
                  :key="index"
                  :label="value"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--机构种类-->
          <el-col :span="8">
            <el-form-item label="机构种类:">
              <el-select
                v-model="table.bean_table.org_type"
                class="venus-input-middle"
                placeholder="--请选择--"
                filterable
                clearable
              >
                <el-option
                  v-for="(value,key,index) in dict.org_type"
                  :key="index"
                  :label="value"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="info" plain @click="resetForm">重置</el-button>
          <el-button type="success" @click="addBean">新增</el-button>
        </div>
      </el-form>
    </div>
    <!-- 查询列表返显 -->
    <div class="page-list">
      <table-pagination
        :table-data="table.bean_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        highlight-current-row
        :total="table.bean_table.total"
        :page-size="table.bean_table.limit"
        :now-page="table.bean_table.nowPage"
        @current-change="currentChange"
        :dict-data="dict"
      />
    </div>
  </div>
</template>

<script>
  import request from '../../../../utils/request'
  import * as kk from '../../../../utils/k-utils'
  // dialog可以拖拽
  import '../../../../utils/directives.js'

  export default {
    name: 'M866',
    data() { // 数据定义
      return {
        /* 字典 */
        dict: {
          oside_type: {}, // 机构类型
          org_type: [] // 机构种类
        },
        /* 表格 */
        table: {
          // 表头配置
          tableHeaderConfig: [
            // { prop: 'order', label: '序号' },
            { prop: 'oside_code', label: '机构编号' },
            { prop: 'oside_name', label: '机构名称' },
            { prop: 'oside_type', label: '机构类型' },
            { prop: 'org_type', label: '机构种类' },
            { prop: 'contact', label: '联系人' },
            { prop: 'phoneno', label: '电话号码' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '修改', func: this.myModify },
              { value: '删除', func: this.myDelete },
              { value: '详情', func: this.myDetail }
            ]
          },
          bean_table: {
            total: 0, // 总条数
            nowPage: 1, // 当前第几页
            limit: 5, // 分页配置
            tableData: [], // 表格数据
            exeid: 'M861EQ001', // exeid
            // 查询条件
            oside_name: '', // 机构名称
            oside_type: '', // 机构类型
            org_type: '' // 机构种类
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {
        /* 加载字典 */
        // 机构类型
        kk.k_load_dict(this, 'oside_type', 't8_oside_type')
        // 机构种类
        kk.k_load_dict(this, 'org_type', 't8_org_type')
        /* 加载表格数据 */
        this.table.bean_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'bean_table', 'public')
      },
      // 发送保存
      send_save(service_name, exeid, params) {
        params.exeid = exeid
        return request({
          loading: true,
          url: service_name + '/base/comn-update.json',
          method: 'post',
          params: params
        })
      },
      // 事件触发
      search() { // 查询函数
        this.table.bean_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'bean_table', 'public')
      },
      // 重置
      resetForm() {
        this.table.bean_table.oside_name = ''// 机构名称
        this.table.bean_table.oside_type = ''// 机构类型
        this.table.bean_table.org_type = ''// 机构种类
      },
      // 下一页触发的事件
      currentChange(index) {
        this.table.bean_table.nowPage = index // 初始第一页
        kk.k_load_table(this, 'bean_table', 'public')
      },
      // ======================新增、修改、详情======================
      /* 新增 */
      addBean() {
        this.$router.push({
          path: '/M866SP001'
        })
      },
      /* 修改 */
      myModify(item, index) {
        this.$router.push({
          path: '/M866SP002',
          query: item
        })
      },
      /* 详情 */
      myDetail(item, index) {
        this.$router.push({
          path: '/M866SP003',
          query: item
        })
      },
      /* 删除 */
      myDelete(item, index) {
        var _this = this
        this.$confirm('确认删除吗?', '提示', {})
          .then(() => {
            _this.send_save('public', 'M861ED004', item).then(rep => {
              _this.search()
            })
          })
          .catch(() => { /* 用户取消注销 */ })
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
